<!-- 提示文字显示组件 -->

<!-- 传入属性 -->
<!-- msgObj:传入的通讯对象 显示时间默认 time:2000
         示例：{text: "领取成功",time: "3000"}
     promptShow: 样式集中对象 width:120  默认 top:50%  left:50%  translate:-50%  color:#fff  size:12  weigh:400  backColor:rgba(0,0,0,0.7) 
	     示例:{width: "",top: "",left: "",translate: "",color: "",size: "",weight: "",backColor: ""};-->

<!-- 使用示例 -->
<!-- <prompt-text ref="text"></prompt-text>
	在需要的方法中使用方法:this.$refs.text.openShow();
     注：支持传入对象参数，参数格式参照msgObj属性，可以直接执行此传入的格式文字+持续时间修改
        如：this.$refs.text.openShow({ text: '您还不是当前档位的会员哦~' }) -->

<template>
    <div
        class="promptText"
        :style="[
            { width: promptShow.width ? promptShow.width + 'px' : '120px' },
            { top: promptShow.top ? promptShow.top : '50%' },
            { left: promptShow.left ? promptShow.left : '50%' },
            {
                transform: promptShow.translate
                    ? 'translate(' + promptShow.translate + ')'
                    : 'translate(-50%)',
            },
            {
                backgroundColor: promptShow.backColor
                    ? promptShow.backColor
                    : 'rgba(0,0,0,0.7)',
            },
            { color: promptShow.color ? promptShow.color : '#fff' },
            { fontWeight: promptShow.weight ? promptShow.weight : 400 },
            { fontSize: promptShow.size ? promptShow.size + 'px' : '12px' },
        ]"
        :class="open ? 'show' : 'close'"
        id="promptText"
    >
        {{ msgObj.text }}
    </div>
</template>

<script>
export default {
    props: {
        // 传入的通讯对象
        msgObjs: {
            type: [Object],
            default() {
                return {
                    text: '',
                    time: '',
                };
            },
        },

        // 样式集中对象 width:120  默认 top:50%  left:50%  translate:-50%  color:#fff  size:12  weigh:400  backColor:rgba(0,0,0,0.7)
        promptShow: {
            type: [Object],
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            // 展示弹窗的中间值
            open: false,
            msgObj: {},
        };
    },
    watch: {
        msgObjs: {
            handler(msgObjs) {
                this.msgObj = msgObjs;
            },
            deep: true,
        },
    },
    methods: {
        //   展示弹窗的执行函数
        openShow(obj) {
            obj ? (this.msgObj = obj) : '';
            // 获取此组件变量
            let promptText = document.getElementById('promptText');
            //   将此组件展示出来
            promptText.style.display = 'block';
            //   打开开启动画
            this.open = true;

            // 使用定时器，在规定的时间中，展示此组件内容，然后在将其关闭
            setTimeout(
                () => {
                    // 执行关闭动画
                    this.open = false;

                    //在400毫秒后，隐藏此组件
                    setTimeout(() => {
                        promptText.style.display = 'none';
                    }, 400);
                },
                // 判断是否有显示时间传入，有的话就绑定此时间，否则默认2s
                this.msgObj.time ? this.msgObj.time : 2000,
            );
        },
    },
    created() {
        // 同步传入的默认渲染文字参数
        this.msgObj = this.msgObjs;
    },
    mounted() {
        //   隐藏此组件
        let promptText = document.getElementById('promptText');
        promptText.style.display = 'none';
    },
};
</script>

<style scoped>
/* 提示文字显示组件 */
.promptText {
    position: fixed;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    opacity: 0;
}
/* 展示动画 */
.show {
    animation: openShow 0.4s linear 0s forwards;
}
/* 关闭动画 */
.close {
    animation: closeShow 0.4s linear 0s forwards;
}

/* 展开打开动画 */
@keyframes openShow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 展开关闭动画 */
@keyframes closeShow {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>
